/*
 * @Author: wangzhongjie
 * @Date: 2020-01-08 09:49:51
 * @LastEditors: wangzhongjie
 * @LastEditTime: 2020-03-10 16:33:55
 * @Description:添加文章
 * @Email: UvDream@163.com
 */
// xs: <576px响应式栅格。
// sm：≥576px响应式栅格.
// md: ≥768px响应式栅格.
// lg: ≥992px响应式栅格.
// xl: ≥1200px响应式栅格.
// xxl: ≥1600px响应式栅格.
import React, { useState, useEffect } from "react";
import { Row, Col, Input, Select, Button, message } from "antd";
import marked from "marked";
import hljs from "highlight.js";
import Article from "../../api/article/index";
import { formatDate } from "../../util/util";
import MarkDownEdit from "./markdown";
import "../../styles/code.less";
import "./add-article.less";
const { Option } = Select;
// const { TextArea } = Input;

function AddArticle(props) {
  // 解析markdown
  const renderer = new marked.Renderer();
  marked.setOptions({
    renderer: renderer,
    gfm: true,
    pedantic: false,
    sanitize: false,
    tables: true,
    breaks: false,
    smartLists: true,
    smartypants: false,
    highlight: function(code) {
      return hljs.highlightAuto(code).value;
    }
  });
  // 文章相关
  const [articleID, setArticleId] = useState(""); //文章id
  const [articleTitle, setArticleTitle] = useState(""); //文章标题
  const [articleType, setArticleType] = useState(); //文章类型
  const [articleContent, setArticleContent] = useState(""); //markdown内容
  const [htmlContent, setHtmlContent] = useState("预览内容"); //预览内容

  // 文章类别
  const [selectType, setSelectType] = useState([]);
  useEffect(() => {
    getSelectType();
    // 获取id
    let tempId = props.match.params.id;
    if (tempId) {
      setArticleId(tempId);
      console.log("获取id", tempId);
      getDetail(tempId);
    }
  }, [articleID, props.match.params.id]);

  const getSelectType = () => {
    Article.types().then(res => {
      if (res.code === 200) {
        setSelectType(res.data);
      }
    });
  };

  // --------------------------------------------------------------------保存文章-------------------------------------------------
  const saveArticle = props => {
    let formData = {
      title: articleTitle,
      type_id: String(articleType),
      user_id: "1",
      article_content: articleContent
    };
    console.log("文章id", articleID);
    if (articleID === "") {
      formData.article_id = "";
      console.log("新增文章");
      // 新增文章
      formData.add_time = formatDate(new Date(), "yyyy-MM-dd hh:mm");
      formData.modify_time = formatDate(new Date(), "yyyy-MM-dd hh:mm");
    } else {
      console.log("修改文章");
      formData.article_id = String(articleID);
      // 修改文章
      formData.modify_time = formatDate(new Date(), "yyyy-MM-dd hh:mm");
    }
    if (!articleTitle) {
      message.error("请输入文章标题");
      return false;
    } else if (!articleType) {
      message.error("请选择文章类别");
      return false;
    } else if (!articleContent) {
      message.error("请输入文章内容");
      return false;
    }
    Article.add(formData).then(res => {
      if (res.code === 200) {
        if (articleID) {
          message.success("修改成功!");
        } else {
          message.success("保存文章成功!");
        }
        // props.history.push("/index/articleList");
        setArticleId(res.data.ID);
      }
    });
  };
  // --------------------------------------------------------------------获取文章详情-------------------------------------------------
  const getDetail = id => {
    Article.detail({ id: id }).then(res => {
      if (res.code === 200) {
        let article = res.data;
        setArticleTitle(article.title);
        setArticleType(article.type_id);
        setArticleContent(article.article_content);
        let html = marked(article.article_content);
        setHtmlContent(html);
      }
    });
  };
  // 内容输入改变
  // const changeContent = e => {
  //   setArticleContent(e.target.value);
  //   let html = marked(e.target.value);
  //   setHtmlContent(html);
  // };
  // 标题输入框变化
  const titleChange = e => {
    setArticleTitle(e.target.value);
  };
  // 输入框变化
  const selectChange = value => {
    setArticleType(value);
  };
  const callback = (html, md) => {
    console.log("-------外部获取编辑器内容--------");
    console.log(html, md);
    setArticleContent(md);
  };

  return (
    <div className="add white-bg">
      {/* 标题发表栏 */}
      <Row gutter={5}>
        <Col xs={24} sm={24} md={24} lg={24} xl={18}>
          {/* 标题 */}
          <Row gutter={10}>
            <Col
              xs={24}
              sm={24}
              md={18}
              lg={18}
              xl={18}
              className="margin_top_10"
            >
              <Input
                placeholder="文章标题"
                value={articleTitle}
                onChange={titleChange}
              />
            </Col>
            <Col xs={24} sm={24} md={6} lg={6} xl={6} className="margin_top_10">
              <Select
                placeholder="选择类型"
                style={{ width: "100%" }}
                value={articleType}
                onChange={selectChange}
              >
                {selectType.map((item, index) => {
                  return (
                    <Option key={index} value={item.ID}>
                      {item.type_name}
                    </Option>
                  );
                })}
              </Select>
            </Col>
          </Row>
        </Col>
        <Col
          xs={24}
          sm={24}
          md={24}
          lg={24}
          xl={6}
          style={{ textAlign: "center" }}
        >
          <Button
            type="primary"
            shape="round"
            className="margin_top_10"
            onClick={saveArticle}
          >
            发表
          </Button>
          {/* <Button
            shape="round"
            style={{ marginLeft: "20px" }}
            className="margin_top_10"
          >
            暂存文章
          </Button> */}
        </Col>
      </Row>
      <MarkDownEdit callback={callback} mdContent={articleContent} />

      {/* 文章栏 */}
      {/* <Row gutter={5}>
        <Col xs={24} sm={24} md={24} lg={24} xl={12} className="margin_top_10">
          <TextArea
            autoSize
            className="add-content-markdown "
            rows={35}
            style={{ minHeight: "745px" }}
            value={articleContent}
            onChange={changeContent}
            placeholder="文章内容"
          />
        </Col>
        <Col xs={24} sm={24} md={24} lg={24} xl={12} className="margin_top_10">
          <div
            className="add-content-html"
            dangerouslySetInnerHTML={{ __html: htmlContent }}
          ></div>
        </Col>
      </Row> */}
    </div>
  );
}
export default AddArticle;
